<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<title>修改博客</title>
		<script src="/js/axios.js"></script>
		<script src="/js/vue.js"></script>
		<script src="/js/element-ui/index.js"></script>
		<link rel="stylesheet" type="text/css" href="/js/element-ui/index.css" />
		<script type="text/javascript" src="/js/editor.js"></script>
	</head>
	<body>
		<div id="box">
			<div th:include="~{common/nav-head::head}"></div>
			<div style="display: flex;padding-top: 100px;">
				<div>
					<div style="margin-left: 20vw;margin-top: 1vw;">
						<span style="font-size: 13px;">博客类型:</span>
						<el-select v-model="blog.typeName">
							<el-option :key="index" @click.native="getTypeId(item.id)" :value="item.name" v-for="(item,index) in blogTypes">
								{{item.name}}
							</el-option>
						</el-select>
					</div>
				</div>
			</div>
			<div style="margin-left: 23vw;margin-top: 1vw;">
				<span style="font-size: 13px;">标题:</span>
				<el-input v-model="blog.title" style="width: 200px;height: 40px;line-height: 40px;"></el-input>
				<el-button style="margin-left: 30vw;" icon="el-icon-upload" @click="updateBlog()" round>修改</el-button>
			</div>
		</div>
		<div id="editor" style="margin-top: 6vw;margin-left: 5vw;"></div>
	</body>
	<script>
		const E = window.wangEditor
		const editor = new E("#editor")
		editor.config.uploadImgShowBase64 = true
		editor.create()
		new Vue({
			el: "#box",
			data: {
				content:{
					id:null,
					content:null
				},
				blog:{
					id:null,
					typeName:"",
					typeId:null,
					title:null,
					digest:null
				},
				blogTypes:[]
			},
			methods: {
				updateBlog(){
					let _this = this
					let text = editor.txt.text()
					if(text.length>=50){
						this.blog.digest = text.substring(0,49)+"..."
					}else{
						this.blog.digest = text
					}
					this.content.content = editor.txt.html()
					axios.post("/api/cons/blog/update",{blog:this.blog,content:this.content})
					.then(function(response){
						if(response.data.code == 200){
							_this.$message({
								message: response.data.msg,
								showClose: 'true',
								type: 'success'
							})
							window.location.href = "/api/cons/blog/go2FindMyBlogs"
						}
					})
				},
				getTypeId(typeId){
					this.blog.typeId = typeId
				}
			},
			mounted() {
				let _this = this
				this.blog.userId = sessionStorage.getItem("id")
				this.blog.nickname = sessionStorage.getItem("nickname")
				axios.get("/api/public/blogType/findAll")
				.then(function(response){
					_this.blogTypes = response.data.data
				})
				let blogId = sessionStorage.getItem("blogId")
				axios.get("/api/public/blog/findById/"+blogId)
				.then(function(response){
					let data = response.data.data
					_this.content.id = data.contentId
					_this.blog.id = data.id
					_this.blog.title = data.title
					_this.blog.typeId = data.typeId
					axios.get("/api/public/content/findById/"+_this.content.id)
					.then(function(response){
						editor.txt.html(response.data.data.content)
					})
				})
			}
		})
	</script>
	<style>
		a{
			font-size: 10px;
			text-decoration: none;
			color: lightgrey;
		}
		.w-e-toolbar,
		.w-e-menu,
		.w-e-text-container,
		.w-e-text {
			width: 83%;
		}
	</style>
</html>
